<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
    <title>图片管理</title>
    <style type="text/css">
    * { margin: 0px; padding: 0px;}
    .web {
    	width: 1000px;
    	margin: 0 auto;
    }
    .tc {
    	text-align: center;
    }
    li {
    	list-style: none;
    }
    .selectImageList {
    }
    .selectImageList li,
    .imageLists li {
    	float: left;
    	width: 165px;
    	text-align: center;
    	height: 232px;
    	background-color: #999;
    	line-height: 232px;
    	color:#fff;
    	font-size: 42px;
    	margin-right: 2px;
    }
    .selectImageList li.on {
    	background-color: rgb(108, 187, 82);
    }

    .selectImageList li:last-child,
    .imageLists li:nth-child(6n) {
    	margin-right: 0px;
    }
    .line {
    	width: 100%;
    	height: 30px;
    	text-align: center;
    	line-height: 30px;
    	color: #fff;
    	background-color: #666;
    	clear: both;
    }
    .imageLists {}

    </style>
  </head>
  <body>
  	<div class="web">
  		<h2 class="tc">图片管理</h2>
  		<ul class="selectImageList">
  			<li class="box">
  			1
  			</li>
  			<li class="box">
  			2
  			</li>
  			<li class="box">
  			3
  			</li>
  			<li class="box">
  			4
  			</li>
  			<li class="box">
  			5
  			</li>
  			<li class="box">
  			6
  			</li>
  		</ul>
  		<div class="line">
  			华丽的分割线(请注意要选上面的放入框)
  		</div>
  		<ul class="imageLists">
  			
  		</ul>
  	</div>
  </body>
</html>
<script id="item" type="text/template">
	<%_.each(datas, function(item) {%>
		<li>
		<img src="<%= item.src %>" data-id="<%= item.id %>" width="98%" />
		</li>
	<%});%>
</script>
<script type="text/javascript">
	var datas = [
		{
			src : "http://image.tianjimedia.com/uploadImages/2013/290/R35S0YLQ1PB9_680x500.jpg",
			id : "0"
		},
		{
			src : "http://image.tianjimedia.com/uploadImages/2013/290/3CHL92R6UU4I_680x500.jpg",
			id : "1"
		},
		{
			src : "http://image.tianjimedia.com/uploadImages/2013/290/1OOXIKUXT89S_1000x500.jpg",
			id : "2"
		},
		{
			src : "http://image.tianjimedia.com/uploadImages/2013/290/R35S0YLQ1PB9_680x500.jpg",
			id : "0"
		},
		{
			src : "http://image.tianjimedia.com/uploadImages/2013/290/3CHL92R6UU4I_680x500.jpg",
			id : "1"
		},
		{
			src : "http://image.tianjimedia.com/uploadImages/2013/290/1OOXIKUXT89S_1000x500.jpg",
			id : "2"
		},
		{
			src : "http://image.tianjimedia.com/uploadImages/2013/290/R35S0YLQ1PB9_680x500.jpg",
			id : "0"
		},
		{
			src : "http://image.tianjimedia.com/uploadImages/2013/290/3CHL92R6UU4I_680x500.jpg",
			id : "1"
		},
		{
			src : "http://image.tianjimedia.com/uploadImages/2013/290/1OOXIKUXT89S_1000x500.jpg",
			id : "2"
		},
		{
			src : "http://image.tianjimedia.com/uploadImages/2013/290/R35S0YLQ1PB9_680x500.jpg",
			id : "0"
		},
		{
			src : "http://image.tianjimedia.com/uploadImages/2013/290/3CHL92R6UU4I_680x500.jpg",
			id : "1"
		},
		{
			src : "http://image.tianjimedia.com/uploadImages/2013/290/1OOXIKUXT89S_1000x500.jpg",
			id : "2"
		}
	]
	$(".imageLists").html( _.template($("#item").html(), datas));
</script>

<script type="text/javascript">

	// 选中图片
	$(".imageLists li").on("click",function(){
		$(".selectImageList li.on").html("").append($(this).find("img").clone());
	})

	// 选中放入的位置
	$(".selectImageList .box").click(function(){
		var index = $(this).index(),
			element = $(".selectImageList .box");
		element.removeClass("on");
		element.eq(index).addClass("on");
	})
</script>